<template>
	<view class="sliding">
		<view class="custom">
			<view class="uni-list-cell-db">启用封面:</view>
			<switch :checked="toEnableTheCover" @change="show"  style="transform: scale(0.6);"/>
		</view>
		<span v-show="toEnableTheCover">
		<view class="box">
			<view class="title">
				<text>设置封面</text>
			</view>
			<view class="picture">
				<block v-for="(item,index) in img" :key="index">
					<image :src="item.url" mode="aspectFill" @click="changeImg(item.url)"></image>
				</block>
				<button @click="aCustomCover" class="mybutton">自定义封面</button>
			</view>
		</view>
		<view class="box">
			<view class="title">
				<text>设置答题按钮</text>
			</view>
			<button class="mybutton" @click="edit">编辑文案</button>
			<button class="mybutton" @click="chooseAColor(1)">选择颜色</button>
		</view>
		<view class="box">
			<view class="title">
				<text>设置活动说明按钮</text>
			</view>
			<view class="custom">
				<view class="uni-list-cell-db">启用活动说明:</view>
				<switch :checked="isActivitiesThat" @change="openActivity"  style="transform: scale(0.6);"/>
			</view>
			<view v-if="isActivitiesThat">
				<button class="mybutton" @click="chooseAColor(2)">选择颜色</button>
				<button class="mybutton" @click="jumpGraphicPage">跳转图文页</button>
			</view>
		</view>
		<view class="box" style="margin-bottom: 50px;">
			<view class="title">
				<text>自定义按钮</text>
			</view>
			<view class="custom">
				<view class="uni-list-cell-db">自定义按钮:</view>
				<switch :checked="customButton" @change="openCustomButton"  style="transform: scale(0.6);"/>
			</view>
			<view v-if="customButton">
				<button class="mybutton" @click="chooseAColor(3)">选择颜色</button>
				<button class="mybutton" @click="jumpCustomGraphicPage">跳转图文页</button>
			</view>
		</view>
		</span>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:[
					{url:"https://img.pptjia.com/image/20180912/21feca1332fa01add7cb4e2e2af50f6e.jpg"},
				] ,//封面图片
				type:1 //1.答题按钮颜色 2.活动说明按钮颜色 3.自定义按钮颜色
			};
		},
		props:[
			"isActivitiesThat",
			"toEnableTheCover",
			"customButton"
		],
		methods:{
			/*********** 有用的 *************/
			show(e){
				this.$emit('openCover',e.detail.value)
			},
			changeImg(url){
				this.$emit('changeImg',url)
			},
			aCustomCover(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async(res) => {
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						})
						for (let temp of tempFilePaths) {
							console.log(this.$parent.$parent.formid);
							// 图片上传服务器
							await uni.uploadFile({
								url: this.url+'/PictureController/fileUpload',
								filePath: temp,
								name: 'file',
								formData:{
									'formid':this.$parent.$parent.formid,
									'PhotoType':2
								},
								success: res => {
									let img = JSON.parse(res.data).data.imageLink
									// 上传完成后处理
									this.$emit('changeImg',img) //需要更换为线上图片地址
									uni.hideLoading()
								},
								fail: (err) => {
									console.log(err);
								}
							});
						}
					}
				});
			},
			chooseAColor(type){
				this.$emit('Color',type)
			},
			edit(){
				uni.showModal({
					title:"按钮文字",
					placeholderText:"请输入按钮文字",
					editable:true,
					success: (res) => {
						this.$emit('changeBtnText',res.content)
					}
				})
			},
			jumpGraphicPage(){
				uni.showModal({
					title:"跳转图文页",
					editable:true,
					placeholderText:"请输入图文页链接",
					success: (res) => {
						this.$emit('activeLink',res.content)
					}
				})
			},
			openCustomButton(e){
				this.$emit('openCustomButton',e.detail.value)
			},
			jumpCustomGraphicPage(){
				uni.showModal({
					title:"跳转图文页",
					editable:true,
					placeholderText:"请输入图文页链接",
					success: (res) => {
						this.$emit('jumpCustomGraphicPage',res.content)
					}
				})
			},
			openActivity(e){
				this.$emit('openActivity',e.detail.value)
			},
		}
	}
</script>

<style lang="less" scoped>
	text{
		font-size: 12px;
	}
	.title{
		text-align: center;
		margin: 10rpx 0 10rpx 0;
	}
	.sliding{
		overflow-x: hidden; 
		overflow-y: scroll; 
		-webkit-overflow-scrolling: touch; 
		height: 100vh;
	}
	::-webkit-scrollbar{display:none;}
	.custom{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
	}
	image{
		width: 40%;
		height: 200rpx;
		margin-left: 3%;
		margin-top: 10rpx;
	}
	image:nth-child(odd){
		margin-left: 8%;
	}
	.mybutton{
		width: 82%;
		background-color: #80b156;
		color: white;
		font-size: 12px;
		margin: 30rpx auto 30rpx auto;
	}
	.uni-list-cell-db{
		font-size: 16px;
	}
</style>
